<!--
 * @Author: your name
 * @Date: 2021-11-20 00:11:16
 * @LastEditTime: 2021-11-20 00:14:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swjc\sk\index.vue
-->
<template>
    <!-- 水库 -->
    <div class="top">
        <div class="raining">
            <p>雨水情</p>
        </div>
        <div class="level">
            <div class="level-content" v-for="(item, index) in List" :key="index">
                <div class="level-top">
                    <span>{{item.number}}</span>
                    <span>{{item.danwei}}</span>
                </div>
                <div class="shuiwei">{{item.shuiwei}}</div>
            </div>
        </div>
        <div class="tubiao">
            <div id="detailcharts" style="width:450px;height:180px; margin-left: 0px"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            List: [
                {
                    number: '28',
                    danwei: 'm',
                    shuiwei: '当前水位',
                },
                {
                    number: '320',
                    danwei: 'mm/s',
                    shuiwei: '水位上涨速度',
                },
                {
                    number: '500',
                    danwei: 'mm',
                    shuiwei: '最大降雨量',
                },
                {
                    number: '120',
                    danwei: 'mm',
                    shuiwei: '最小降雨量',
                },
            ],
            option: {
                title: {
                    text: '',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                legend: {
                    itemHeight: 10,
                    itemWidth: 10,
                    icon: 'circle', // 修改形状
                    itemGap: 24, // 修改间距
                    top: 20,
                    textStyle: {
                        //图例文字的样式
                        color: 'rgba(255,255,255,0.8)',
                        fontSize: 12,
                    },
                    data: ['实时降雨', '历史降雨'],
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',

                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,0.8)',
                        },
                    },
                    axisTick: {
                        //x轴刻度线
                        show: false,
                    },
                    data: ['9点', '10点', '11点', '12点', '13点'],
                },
                yAxis: {
                    type: 'value',
                    max: 400,
                    min: 0,
                    splitNumber: 5,

                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,0.8)',
                        },
                    },

                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(255,255,255,0.1)',
                            // color:rgba(255,255,255,.5)
                        },
                    },
                },
                series: [
                    {
                        name: '实时降雨',
                        type: 'bar',
                        barWidth: 15, //柱图宽度
                           barGap:'40%',
            label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#ffffff",
                    fontSize: 10,
                  },
                },
                        data: [248, 258, 300, 210, 310],
                    },
                    {
                        name: '历史降雨',
                        type: 'bar',
                           barGap:'40%',
            label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#ffffff",
                    fontSize: 10,
                  },
                },
                        barWidth: 15, //柱图宽度
                        data: [110, 110, 150, 50, 200],
                    },
                ],
            },
        }
    },
    computed: {},
    watch: {},
    methods: {
        showchart() {
            let myChart = echarts.init(document.getElementById('detailcharts'))
            myChart.setOption(this.option)
        },
    },
    created() {},
    mounted() {
        this.showchart()
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 33%;
    // border: 1px solid red;
    .raining {
        width: 100%;
        height: 25px;
        // border: 1px solid red;
        background: url('../../../../../../../src/assets/images/home/top.png') no-repeat center;
        background-size: 99% 100%;
        p {
            margin-left: 15px;
            font-family: OPPOSans;
            font-size: 18px;
        }
    }
    .level {
        width: 100%;
        height: 60px;
        // border: 1px solid red;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .level-content {
            width: 25%;
            // height: 60px;
            // border: 1px solid red;
            // text-align: center;
            font-family: OPPOSans;

            .level-top {
                span:nth-child(1) {
                    font-size: 20px;
                    line-height: 32px;
                    color: #e8effb;
                    margin-left: 14px;
                }
                span:nth-child(2) {
                    font-size: 18px;
                    color: #e8effb;
                    opacity: 0.4;
                    margin-left: 2px;
                }
            }
            .shuiwei {
                font-size: 14.4px;
                line-height: 25px;
                letter-spacing: 0.6px;
                margin-left: 14px;
                color: #e8effb;
            }
        }
        .level-content:nth-child(1) {
            width: 20%;
        }
        .level-content:nth-child(4) {
            width: 22%;
            // text-align: right;
        }
    }
}
</style>
